
module.exports = require('angular').module('components.banner', [
    require(__COMPONENTS__ + '/banner/service').name
])
    .directive('components.banner', function () {
        return {
            template: function (attr) {
                require('.' + attr.attr('banner-css'))
                return require('.' + attr.attr('banner-tpl'))
            }
        }
    })
    .directive('components.banner.scroller', function (bannerservice) {
        return {
            link: function (scope, ele, attr) {
                bannerservice.getIndexBanners().then(function (imgList) { // 异步获取成功
                    var len = imgList.length
                    var container = ele.parent()[0]
                    ele.css('width', container.offsetWidth * len + 'px');
                    imgList.forEach(e => {
                        var img = document.createElement('img')
                        img.setAttribute('src', e)
                        img.style.height = container.offsetHeight + 'px'
                        img.style.width = container.offsetWidth + 'px'
                        img.style.cssFloat = 'left'
                        ele.append(img)
                    });
                    require.ensure([], () => {
                        var $ = require("jquery")
                        var indexs = $(".indexs")
                        scope.run = function () {
                            var this_ = this
                            this.scrolling = false
                            this.page = 1;

                            this.ani = function () {
                                this_.page = this_.page === len ? 1 : this_.page + 1
                                this.scrolling = true
                                $(ele).animate({
                                    left: container.offsetWidth - this_.page * container.offsetWidth + 'px'
                                }, 300, function () {
                                    this.scrolling = false
                                })
                                setTimeout(function(){
                                    indexs.eq(this_.page - 1).addClass('on').siblings().removeClass('on')
                                }, 150)
                            }
                            setInterval(function () {
                                this_.ani()
                            }, 3500)
                            indexs.eq(0).addClass('on')
                        }
                        bannerservice.indexRender ?
                            scope.run() :
                            bannerservice.__defineSetter__('indexRender', () => {
                                scope.run()
                            })
                    })
                })
            }
        }
    })
    .directive('components.banner.index', function (bannerservice) {
        return {
            template: function (ele, attr) {
                if (ele.parent().parent().attr('banner-index') != undefined) {
                    function run(imgList) {
                        imgList.forEach((e, i) => {
                            var div = document.createElement('div')
                            div.setAttribute('class', 'indexs')
                            div.style.cssFloat = 'left'
                            ele.append(div)
                        })
                        bannerservice.indexRender = true
                    }
                    bannerservice.imgList ?
                        run(bannerservice.imgList) :
                        bannerservice.__defineSetter__('imgList', function (imgList) {
                            run(imgList)
                        })
                }
            }
        }
    })
